<template>
    <div>
        <div class="banner">
            <img src="@/assets/img/introduce/banner_a@2x.png" alt="banner">
        </div>
        <el-row class="content">
            <el-row class="contentInner">
                <NavStitle :routes="standard.nav" :links="links"/>
                <el-row class="routerView">
                    <p class="title">{{(standard.nav)[idx]}}</p>
                    <keep-alive>
                        <router-view/>
                    </keep-alive>
                </el-row>
            </el-row>
        </el-row>
    </div>
</template>

<script>
import NavStitle from '@/components/navStitle';
export default {
    components:{NavStitle},
    data(){
        return {
            links:[
                '/standard/practice',
                '/standard/construction',
                '/standard/video'
            ],
            idx:0
        }
    },
    computed:{
        standard(){
            return this.$t("standard");
        }
    },
    watch:{
        $route:function(newV){
            const names = ['practice','construction','video'];
            const name = newV.name;
            const idx = names.indexOf(name);
            this.idx = idx;
        }
    }
}
</script>

<style lang="less" scoped>
.banner {
    height: 280px;
    background-color: pink;
    img {
        height: 280px;
        width: 100%;
    }
}
.content {
    margin-top: 37px;
    .contentInner {
        width:1280px;
        margin: 0 auto;
        .routerView {
            padding-top: 40px;
            .title {
                font-size:30px;
                font-weight:400;
                color:rgba(51,51,51,1);
                line-height:1;
                margin-bottom: 40px;
            }
        }
    }
}
</style>